<template>
    <div>
        <h2>HOME PAGE</h2>
        <p>name:{{ name }}</p>
        <p>age:{{ age }}</p>
        <button @click="changeName">changeName</button>
        <button @click="changeAge">changeAge</button>
    </div>
</template>

<script>
import { ref, watchEffect } from "vue"

export default {
    name: "Home",
    setup() {
        let name = ref("你好");
        let age = ref(18);

        //清除副作用
        //在一些情况下,我们需要在监听函数中执行ajax请求,但是在网络请求还没有到达服务器的时候,需要停止监听或者监听函数被再次执行
        //在这种情况下,我们应该把上次网络请求去停止掉,这个时候就可以清除上一次的副作用
        //在watchEffect传入的回调函数中,有一个默认参数(方法) onInvalidate(回调函数)
        let stopWatch = watchEffect((onInvalidate)=>{
            console.log("name==>",name.value);
            console.log("age==>",age.value);
            //setTimeout==>模拟ajax请求
            let timer = setTimeout(()=>{
                console.log("发送后端的数据,2秒后执行")
            },2000);
            onInvalidate(()=>{
                clearTimeout(timer)
            })
        })

        function changeName(){
            name.value += "世界"
        }

        function changeAge(){
            age.value++;
            //如果age.value大于30的时候 停止监听
            if(age.value > 20){
                stopWatch();
            }
        }

        return {
            name,
            age,
            changeName,
            changeAge
        }
    },
}
</script>

<style scoped>

</style>